<template>
  <div class="common_underline" :style="{ paddingLeft: marginLeft, paddingRight: marginRight }">
    <div
      class="common_underline_content"
      :style="{
        height,
        backgroundColor: color,
      }"
    ></div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'commonUnderline',
  };
</script>
<script lang="ts" setup>
  import variable from '@/styles/variable.module.scss';
  interface Props {
    marginLeft?: string;
    marginRight?: string;
    color?: string;
    height?: string;
  }
  const props = withDefaults(defineProps<Props>(), {
    color: variable.underlineColor,
    marginRight: '0',
    marginLeft: '0',
    height: '1px',
  });
</script>

<style scoped lang="scss">
  .common-underline {
    width: 100%;
    box-sizing: border-box;
    .common_underline_content {
      width: 100%;
    }
  }
</style>
